import React, { Component } from "react";
import { Spin, Icon, Divider } from "antd";
import { connect } from "dva";
import background from "./components/default.png";

import styles from "./ChannelDetail.less";

// const channelTypeList = ["", "政务微信", "app", "网页客户端", "短信", "邮件"];
@connect(stores => ({
  channelData: stores.channelModel,
  channelDictionaryModel: stores.channelDictionaryModel
}))
class ChannelDetail extends Component {
  state = {
    loading: false,
    data: {}
  };

  mailEnum = ["SMTP", "POP3", "IMAP"];

  componentDidMount() {
    this.gitDetail();
  }

  gitDetail = () => {
    const { history } = this.props;
    const pushChannelId = history.location.search.split("=");
    if (pushChannelId[1]) {
      const { dispatch } = this.props;
      dispatch({
        type: "channelModel/channelDetail",
        payload: { pushChannelId: pushChannelId[1] }
      }).then((res = {}) => {
        if (res.success) {
          this.setState({
            data: res.datas
          });
        }
      });
    }
  };

  back = () => {
    this.props.history.push("/messageCenter/channelManager/channelList");
  };

  render() {
    // owners = [{ name: "" }],
    const { channelDictionaryModel = {} } = this.props;
    const { loading, data } = this.state;
    const { channelType = 0 } = data;
    const { channelsTypesData = [] } = channelDictionaryModel;
    const channel = channelsTypesData.find(d => d.value === data.channelType);
    const channelName = channel ? channel.des : "";
    return (
      <div className={styles.root}>
        <Spin spinning={loading}>
          <div className={styles.top}>
            <div className={styles.textContainer}>
              <div className={`${styles.text} ${styles.title}`}>基本信息</div>
              <div className={`${styles.text} ${styles.close}`}>
                <Icon onClick={this.back} type="close" />
              </div>
            </div>
            <div className={styles.textContainer}>
              <div className={styles.text}>
                <span className={styles.name}>渠道账户编码：</span>
                <span className={styles.value}>{data.channelCode}</span>
              </div>
              {/* <div className={styles.text}>
                <span className={styles.name}>管理员：</span>
                <span className={styles.value}>
                  {(owners && owners[0] && owners[0].name) || ""}
                </span>
              </div> */}
            </div>
            <div className={styles.textContainer}>
              <span className={styles.name}>渠道账户名称：</span>
              <div className={styles.text}>
                <span className={styles.value}>{data.description}</span>
              </div>
            </div>
            <div className={styles.textContainer}>
              <div className={styles.text}>
                <span className={styles.name}>渠道类型：</span>
                <span className={styles.value}>{channelName}</span>
              </div>
              {/* <div className={styles.text}>
                <span className={styles.name}>归属部门：</span>
                <span className={styles.value}>{data.ownerDeptName}</span>
              </div> */}
            </div>
            <div className={styles.textContainer}>
              <span className={styles.name}>渠道描述：</span>
              <div className={styles.text}>
                <span className={styles.value}>
                  {data.pushChannelDescription}
                </span>
              </div>
            </div>
            <Divider />
            <div className={styles.textContainer}>
              <div className={`${styles.text} ${styles.title}`}>渠道配置</div>
            </div>
            {channelType === 1 ? (
              <div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>轻应用名称：</span>
                      <span className={` ${styles.value}`}>
                        {data.gongZhongNoName}
                      </span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>corp_id：</span>
                      <span className={` ${styles.value}`}>{data.corpId}</span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>corp_secret：</span>
                      <span className={` ${styles.value}`}>
                        {data.corpSecret}
                      </span>
                    </div>
                  </div>
                  <div className={styles.text}>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>应用图标：</span>
                      <img
                        className={` ${styles.value}`}
                        src={
                          data.icon
                            ? `/mgt/get/urlStream?url=${encodeURIComponent(
                                data.icon
                              )}`
                            : background
                        }
                      />
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>agent_id：</span>
                      <span className={` ${styles.value}`}>{data.agentId}</span>
                    </div>
                  </div>
                </div>
              </div>
            ) : null}
            {channelType === 1 ? (
              <div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>app名称：</span>
                      <span className={` ${styles.value}`}>
                        {data.appPackageName}
                      </span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>PackageName：</span>
                      <span className={` ${styles.value}`}>
                        {data.appPackageName}
                      </span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>AppKey：</span>
                      <span className={` ${styles.value}`}>
                        {data.apiAppKey}
                      </span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>AppSecret：</span>
                      <span className={` ${styles.value}`}>
                        {data.apiAppSecret}
                      </span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>
                        CFM/FCM服务器密钥：
                      </span>
                      <span className={` ${styles.value}`}>
                        {data.gcmFcmSecret}
                      </span>
                    </div>
                  </div>
                  <div className={styles.text}>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>应用图标：</span>
                      <img
                        className={` ${styles.value}`}
                        src={
                          data.icon
                            ? `/mgt/get/urlStream?url=${encodeURIComponent(
                                data.icon
                              )}`
                            : background
                        }
                      />
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>华为AppID：</span>
                      <span className={` ${styles.value}`}>
                        {data.huaweiAppId}
                      </span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>华为AppSecret：</span>
                      <span className={` ${styles.value}`}>
                        {data.huaweiAppSecret}
                      </span>
                    </div>
                    <div className={` ${styles.bottomtext}`}>
                      <span className={` ${styles.name}`}>小米AppSecret：</span>
                      <span className={` ${styles.value}`}>
                        {data.xiaomiAppSecret}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ) : null}
            {/* 钉钉 */}
            {(channelType === 7 || channelType === 11) && (
              <div className={styles.textContainer}>
                <div className={styles.text}>
                  <div className={` ${styles.bottomtext}`}>
                    <span className={` ${styles.name}`}>轻应用名称：</span>
                    <span className={` ${styles.value}`}>
                      {data.gongZhongNoName}
                    </span>
                  </div>
                </div>
              </div>
            )}
            {/* 蓝信 */}
            {(channelType === 2 || channelType === 3 )&& (
              <div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>系统名称：</span>
                    <span className={` ${styles.value}`}>{data.apiName}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>蓝信地址：</span>
                    <span className={` ${styles.value}`}>{data.apiUrl}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>应用ID：</span>
                    <span className={` ${styles.value}`}>{data.apiAppKey}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>秘钥：</span>
                    <span className={` ${styles.value}`}>
                      {data.apiAppSecret}
                    </span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>授权类型码：</span>
                    <span className={` ${styles.value}`}>{data.grandType}</span>
                  </div>
                </div>
              </div>
            )}
            {/* 应用端 */}
            {channelType === 6 && (
              <div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>应用端接受类型：</span>
                    <span className={` ${styles.value}`}>
                      {data.channelSysType === 1 ? "REST API" : "RockerMQ"}
                    </span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>API名称：</span>
                    <span className={` ${styles.value}`}>{data.apiName}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>URL：</span>
                    <span className={` ${styles.value}`}>{data.apiUrl}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>version：</span>
                    <span className={` ${styles.value}`}>{data.apiHost}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>app_key：</span>
                    <span className={` ${styles.value}`}>{data.apiAppKey}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>app_secret：</span>
                    <span className={` ${styles.value}`}>
                      {data.apiAppSecret}
                    </span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>method：</span>
                    <span className={` ${styles.value}`}>{data.method}</span>
                  </div>
                </div>
              </div>
            )}
            {/* 邮件 */}
            {channelType === 10 && (
              <div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>邮件用户名：</span>
                    <span className={` ${styles.value}`}>{data.sendName}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>邮件服务器地址：</span>
                    <span className={` ${styles.value}`}>{data.mailHost}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>邮件端口：</span>
                    <span className={` ${styles.value}`}>{data.mailPort}</span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>协议：</span>
                    <span className={` ${styles.value}`}>
                      {this.mailEnum[data.mailAgreement]}
                    </span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>配置属性：</span>
                    <span className={` ${styles.value}`}>
                      {data.params.map(d => (
                        <p key={d.id}>
                          {d.attributeCode}:{d.attributeValue}
                        </p>
                      ))}
                    </span>
                  </div>
                </div>
              </div>
            )}
            {/* 短信 */}
            {channelType === 4 && (
              <div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>
                      短信签名模版code：
                    </span>
                    <span className={` ${styles.value}`}>
                      {data.smsTemplateCode}
                    </span>
                  </div>
                </div>
                <div className={styles.textContainer}>
                  <div className={styles.text}>
                    <span className={` ${styles.name}`}>Endpoint：</span>
                    <span className={` ${styles.value}`}>{data.endpoint}</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </Spin>
      </div>
    );
  }
}

export default ChannelDetail;
